<template>
    <div>
        <cus-modal
            ref="modal"
            :title="`解析供应信息生成excel - 第${ nowindex + 1 }张`"
            @on-visible-change="onVisibleChange"
            @onOk="onOk"
            width="720"
        >  
            <div>
                <Input
                    ref="input"
                    v-model="form.detail[nowindex]"
                    type="textarea"
                    :autofocus="autofocus"
                    :autosize="{ minRows: 15 }"
                    placeholder="请先点击输入框，再使用扫描器扫描；扫描一张后请选择下一张再进行扫描，全部完成后点击确定即可（数据量大时，等待时间会相对较长）"
                />
            </div>
            <div slot="footer">
                <div class="modal-footer">
                    <cus-button size="small" class="mr_2" @onClick="onCancel"
                        >取消</cus-button
                    >
                    <cus-button type="primary" size="small" ghost @onClick="reScan"
                        >重新扫描当前张</cus-button
                    >
                    <cus-button type="primary" size="small" ghost @onClick="reduceIndex"
                        >上一张</cus-button
                    >
                    <cus-button type="primary" size="small" ghost @onClick="addIndex"
                        >下一张</cus-button
                    >
                    <cus-button type="primary" size="small" @onClick="onOk"
                        >确认</cus-button
                    >
                </div>
            </div>
            <Spin size="large" fix v-if="loading"></Spin>
        </cus-modal>
    </div>
</template>

<script>
import { analysisQRCodeGenerateExcel } from "@/api/business/dishesModule";

const form = {
    detail: [],
    id: "",
    sn: ""
};

export default {
    name: "scanAcceptedOrder",
    data() {
        return {
            loading: false,
            form: form,
            autofocus: false,
            nowindex: 0 
        };
    },
    mounted() {
        this.form = this.$cu.deepClone(form);
    },
    methods: {
        focusInput() {
            this.$refs.input.focus({
                preventScroll: true
            });
        },
        onVisibleChange(v) {
            if (!v) {
                this.form = this.$cu.deepClone(form);
                this.nowindex = 0
            }
        },
        onCancel() {
            this.$refs["modal"].show = false;
        },
        show() {
            this.loading = false;
            this.$refs["modal"].show = true;
            this.$nextTick(()=> {
                this.$refs.input.focus({
                    preventScroll: true
                });
            })
        },
        onOk() {
            let reg = new RegExp("[\\u4E00-\\u9FFF]+","g");
            if(reg.test(this.form.detail[this.nowindex])){
                this.$Message.warning("请将输入法切换为英文模式后，重新扫描.");
                this.$nextTick(()=> {
                    this.$refs.input.focus({
                        preventScroll: true
                    });
                })
                return; 
            }
            if(this.keyCounts(this.form.detail, this.form.detail[this.nowindex]) > 1) {
                this.$Message.warning("当前扫描已存在，请重新扫描当前张.");
                return
            }
            if(this.form.detail.length > 0) {
                this.analysisQRCodeGenerateExcelApi();
            } else {
                this.$Message.warning("请先扫描二维码后再点击提交.");
                this.$nextTick(()=> {
                    this.$refs.input.focus({
                        preventScroll: true
                    });
                })
            }
        },
        addIndex() {
            if(!this.form.detail[this.nowindex]) {
                this.$Message.warning("请先完成当前扫描后,再点击下一张.");
                this.$nextTick(()=> {
                    this.$refs.input.focus({
                        preventScroll: true
                    });
                }) 
                return; 
            }
            let reg = new RegExp("[\\u4E00-\\u9FFF]+","g");
            if(reg.test(this.form.detail[this.nowindex])){
                this.$Message.warning("请将输入法切换为英文模式后，重新扫描.");
                this.$nextTick(()=> {
                    this.$refs.input.focus({
                        preventScroll: true
                    });
                })
                return; 
            }
            console.log(`元素 ${ this.form.detail[this.nowindex] }出现的次数是---` + this.keyCounts(this.form.detail, this.form.detail[this.nowindex]));
            if(this.keyCounts(this.form.detail, this.form.detail[this.nowindex]) > 1) {
                this.$Message.warning("当前扫描已存在，请重新扫描当前张.");
                return
            }
            this.nowindex += 1;
            this.$nextTick(()=> {
                this.$refs.input.focus({
                    preventScroll: true
                });
            }) 
        },
        reduceIndex() {
            if(this.nowindex > 0) {
                this.nowindex -= 1;
            }
            this.$nextTick(()=> {
                this.$refs.input.focus({
                    preventScroll: true
                });
            }) 
        },
        reScan() {
            this.$set(this.form.detail,this.nowindex,'');
            this.$nextTick(()=> {
                this.$refs.input.focus({
                    preventScroll: true
                });
            })
        },
        // 点击确定
        analysisQRCodeGenerateExcelApi() {
            this.loading = true;
            return new Promise((resolve) => {
                analysisQRCodeGenerateExcel(this.form.detail).then((res) => {
                    this.loading = false;
                    if (res.code === 1) {
                        this.$Message.success("扫描验收成功");
                        this.$refs["modal"].show = false;
                        this.$parent.onInit();
                        resolve();
                    }
                }).catch((err) => {
                    console.log(err);
                    this.loading = false;
                });
            });
        },
        // KEY重复次数
        keyCounts(arr, value) {
            return arr.reduce((a, v) => v === value ? a + 1 : a + 0, 0);
        }
    },
};
</script>

<style scoped lang="less">
.dbubble-text {
    display: inline-block;
    font-size: 14px;
    padding: 7px 15px;
    border: 1px solid #dcdee2;
    border-radius: 4px;
    color: #303030;
    line-height: 1.8;
    font-family: "微软雅黑";
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.dbubble-text:hover {
    border: 1px solid #4b8cff
}
</style>
